iT邦幫忙

2022 iThome 鐵人賽

DAY 1
0

一隻網頁前端菜鳥工程師,有一點點點點UX相關的背景知識,一直很想參加鐵人挑戰賽,希望透過文章的分享,紀錄自學到的網頁前端UX的相關知識與名詞?如果工作上有曾經用過的好用的東西也希望透過文章的分享記錄下來。

Day1:清單嵌板

這個通常用在選取一個項目可以展開該項目的詳細資訊,讓各個項目資訊選單都能單獨打開或關閉。

  • 適合垂直向,與直欄式的結構。
  • 如果要關閉詳細資訊面板,必須要帶有清楚指示的「關閉」的控制元件(X或者close按鈕)
  • 這樣子的清單很像手風琴模式(Accordion)

以長榮航空的網站為例,使用者點擊詳細資訊可展開該航班的詳細內容
https://ithelp.ithome.com.tw/upload/images/20220911/20122611KhyB2h56kz.png

展開了,然後可以看到右上角明顯的關閉(x)按鈕
https://ithelp.ithome.com.tw/upload/images/20220911/20122611g22gpe5hzF.png

結語:
目前自己還沒遇到需求是要呈現清單嵌板的模式,目前想到的解法應該也是利用手風琴模式下去做變形,下一篇會提到的是手風琴模式(Accordion),第一次參加自我挑戰的組別,如果前輩們對於實現清單嵌板的模式有任何建議,歡迎留言提出,謝謝。


下一篇
Day2: 手風琴模式(Accordion)
系列文
一天一個UX小知識31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言